<template>
  <div>
    <p ref="msg">{{message}}</p>
    <input type="button" value="点击修改message的值" @click="modify">
    <br>
    <!-- 只有当组件的响应式数据 isShow 为 true 时，这个 <input> 元素才会被挂载到 DOM 上；如果 isShow 为 false，
    它就完全不存在于页面中。 -->
    <input type="text" ref="inp" v-if="isShow">
    <input type="button" value="显示文本输入框" @click="toggle">
  </div>
</template>

<script>
import {nextTick} from 'vue'
export default {
    data(){
        return{
            message:"hahaha",
            isShow:false
        }
    },
    methods:{
        //这是因为 Vue 在你调用 this.message = ... 的时候，只是修改了响应式数据，真正的 DOM 更新是 异步、批量在“下一个事件循环”
        // 里发生的。所以在同一个函数里，紧跟着查 this.$refs.msg.innerText，你看到的还是旧的 DOM 内容。
        // modify(){
        //     this.message="hehehehehehe"
        //     console.log(this.$refs.msg.innerText)
        // }
        modify(){
            this.message = 'hehehehehehe';
            nextTick(() => {
            // 这时候 DOM 已经更新，你拿到的 innerText 就是 “hehehehehehe” 了
            console.log(this.$refs.msg.innerText);
            });
        },
        toggle(){
            //1.设置为反
            this.isShow = !this.isShow;
            //2.文本框显示->获取DOM元素->获取焦点关注
            //1和2两个是异步的
            nextTick(()=>{
                if(this.isShow){
                this.$refs.inp.focus()
            }
            })
            
        }
    }

}
</script>

<style>

</style>